<template>
    <div class="admin-dashboard">
      <h1>管理员控制台</h1>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="statistic-card">
            <template #header>
              <div class="card-header">
                <span>用户管理</span>
                <el-button class="button" text @click="$router.push('/admin/users')">查看详情</el-button>
              </div>
            </template>
            <div class="statistic">
              <h3>用户总数</h3>
              <div class="statistic-number">{{ statistics.userCount }}</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="statistic-card">
            <template #header>
              <div class="card-header">
                <span>车辆管理</span>
                <el-button class="button" text @click="$router.push({name: 'AdminVehicles'})">查看详情</el-button>
              </div>
            </template>
            <div class="statistic">
              <h3>车辆总数</h3>
              <div class="statistic-number">{{ statistics.vehicleCount }}</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="statistic-card">
            <template #header>
              <div class="card-header">
                <span>订单管理</span>
                <el-button class="button" text @click="$router.push('/admin/orders')">查看详情</el-button>
              </div>
            </template>
            <div class="statistic">
              <h3>订单总数</h3>
              <div class="statistic-number">{{ statistics.orderCount }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="mt-20">
        <el-col :span="24">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>系统信息</span>
              </div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="系统名称">租车产业链服务共享平台</el-descriptions-item>
              <el-descriptions-item label="系统版本">1.0.0</el-descriptions-item>
              <el-descriptions-item label="系统时间">{{ currentTime }}</el-descriptions-item>
              <el-descriptions-item label="管理员账号">{{ userInfo.username }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="mt-20">
        <el-col :span="24">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>最近订单</span>
              </div>
            </template>
            <el-table :data="recentOrders" style="width: 100%">
              <el-table-column prop="id" label="订单ID" width="80" />
              <el-table-column prop="userId" label="用户ID" width="80" />
              <el-table-column prop="vehicleId" label="车辆ID" width="80" />
              <el-table-column prop="startTime" label="开始时间" />
              <el-table-column prop="endTime" label="结束时间" />
              <el-table-column prop="totalPrice" label="总价" width="100">
                <template #default="scope">
                  ¥{{ scope.row.totalPrice }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag 
                    :type="scope.row.status === 0 ? 'warning' : scope.row.status === 1 ? 'success' : 'info'">
                    {{ scope.row.status === 0 ? '进行中' : scope.row.status === 1 ? '已完成' : '已取消' }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import { ref, onMounted, computed } from 'vue'
  import axios from 'axios'
  
  export default {
    name: 'AdminDashboard',
    setup() {
      const statistics = ref({
        userCount: 0,
        vehicleCount: 0,
        orderCount: 0
      })
      
      const recentOrders = ref([])
      const userInfo = ref({})
      
      const currentTime = computed(() => {
        return new Date().toLocaleString()
      })
      
      const fetchStatistics = async () => {
        try {
          // 获取用户总数
          const usersRes = await axios.get('/api/admin/users')
          if (usersRes.data.success) {
            statistics.value.userCount = usersRes.data.data.length
          }
          
          // 获取车辆总数
          const vehiclesRes = await axios.get('/api/admin/vehicles')
          if (vehiclesRes.data.success) {
            statistics.value.vehicleCount = vehiclesRes.data.data.length
          }
          
          // 获取订单总数
          const ordersRes = await axios.get('/api/admin/orders')
          if (ordersRes.data.success) {
            const orders = ordersRes.data.data
            statistics.value.orderCount = orders.length
            
            // 获取最近的5个订单
            recentOrders.value = orders
              .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
              .slice(0, 5)
          }
        } catch (error) {
          console.error('获取统计数据失败:', error)
        }
      }
      
      onMounted(() => {
        fetchStatistics()
        userInfo.value = JSON.parse(localStorage.getItem('user') || '{}')
      })
      
      return {
        statistics,
        recentOrders,
        currentTime,
        userInfo
      }
    }
  }
  </script>
  
  <style scoped>
  .admin-dashboard {
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .statistic-card {
    margin-bottom: 18px;
  }
  
  .statistic {
    text-align: center;
  }
  
  .statistic-number {
    font-size: 36px;
    font-weight: bold;
    color: #409EFF;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  </style>